<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>投诉记录</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .every-week{
            position: absolute;
            right: 0;
            top: 0.05rem;
            font-size: 0.2rem;
            color: white;
        }
        .complain-head{width: 90%;margin: auto;height: 1rem;}
        .complain-head button{width: 49%;height: 100%;background-color: white;
            outline:none;position: relative;font-size: 0.3rem}
        #title1{float: left}
        #title2{float: right}
        .bottom-line{
            width: 24%;
            height: 2px;
            background-color: #F23A38;
            position: absolute;
            bottom: 0;
            left: 39%;
        }
        .type-line{height: 0.6rem;width: 1px;background-color: #e3e3e3;
            float: left;margin-top: 0.2rem}
        .complain-area{width: 90%;margin: auto;}
        .complain-area li{
            padding-top: 0.4rem;
            font-size: 0.25rem;color: #666;
            height: 4.4rem;width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .show{font-size: 0.25rem;line-height: 0.42rem;
            color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
        .show-imgBox{
            padding-top: 0.3rem;
            height: 1.5rem;
            width: 100%;
        }
        .show-imgBox div:first-child{
            margin-left: 0;
        }
        .imgShow{
            margin-left: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            float: left;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
        .result{
            line-height: 1rem;
            width: 100%;
            height: 0.8rem;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>投诉记录</li>
        <a class="every-week" href="#">违规处罚条例</a>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="complain-head">
        <button id="title1" class="title-btn">
            <a class="right">待调查</a>
            <span class="bottom-line"></span>
        </button>
        <span class="type-line"></span>
        <button id="title2" class="title-btn">
            <a class="right">已处理</a>
            <span class="bottom-line hide"></span>
        </button>
    </div>
    <ul class="complain-area">
        <li>
            <div class="show">投诉时间：2017-10-12 10:10:01</div>
            <div class="show">涉及订单：20172365489</div>
            <div class="show">投诉项目：师傅服务态度投诉--在工作工程中有不文明行为出现</div>
            <div class="show">投诉内容：师傅服务态度不好,不文明</div>
            <div class="show-imgBox">
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
            </div>
            <div class="result">处理结果：待调查</div>
        </li>
        <li>
            <div class="show">投诉时间：2017-10-12 10:10:01</div>
            <div class="show">涉及订单：20172365489</div>
            <div class="show">投诉项目：师傅服务态度投诉--在工作工程中有不文明行为出现</div>
            <div class="show">投诉内容：师傅服务态度不好,不文明</div>
            <div class="show-imgBox">
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
                <div class="imgShow" style="background-image: url('./img/touxiangImg.png')"></div>
            </div>
            <div class="result">处理结果：扣除100积分</div>
        </li>

    </ul>
</div>

<script src="../../lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.title-btn').click(function () {
            $('.title-btn').find('.bottom-line').addClass('hide');
            $(this).find('.bottom-line').removeClass('hide');
        })
    });

</script>
</body>
</html>